Peace 
MIND 


Getting Started 


What's Inside this Course? 


Peace 


MIND What is Node.js? 


node 


A JavaScript Runtime 


"JavaScript on the Server” 


Peace 


MIND What Does That Mean? 


Adds JS Feat | 
s JS Features noge 


| uses 


Written in Compiles to 


> Machine Code 


Bean JavaScript 


Weave 


MIND JavaScript on the Server 


https://my-page.com 


Server 


Can't access 
server-side Code 
Request 


Client (Browser) 


Response 
“HTML Page” 


Peace 


MIND Side note: You're not limited to the Server! 


Node.js is a JavaScript Runtime 


You can use it for more than just 
Server-side Code 


Utility Scripts, Build Tools, ... 


LL 


MIND Node.js‘ Role (in Web Development) 


Run Server 


Create Server & Listen to Incoming Requests 


Business Logic 


Handle Requests, Validate Input, Connect to Database 


Responses 


Return Responses (Rendered HTML, JSON, ...) 


Peace 


MIND Alternatives 


And More (Ruby, ASP.NET, ...) 


Ultimately, you can build the same web apps with all of them 


Choose your preferred syntax, community, ecosystem 


Getting Started 


Course Outline 


Model-View- 
Controller 


aves e Advanced 


Refresher 
Node.js Basics 


Efficient 
Development 


Using Express.js 


U 


Templating 
Engines 


Routes & Models 


Node + SQL 
(MySQL) 


Using Sequelize 


Node + NoSQL 
(MongoDB) 


Using Mongoose 


Sessions & 
Cookies 


Authentication 


p 


Sending E-Mails 


Authentication 
Deep Dive 


User Input 
Validation 


Error Handling 


File Uploads & 
Downloads 


Pagination 


Ü 


Async Requests 


Handling 
Payments 


REST API Basics 


Advanced REST 
API Features 


y 


Using async- 
await 


Websockets & 
Socket.io 


GraphQL 


p 


Deployment 


Beyond Web 
Servers 


Roundup & Next 
Steps 


Peace 


MIND How To Get The Most Out Of The Course 


Skip [Optional] : At your Speed! 
Code Along & Do the 
Exercises 


Use the Course Resources Attached Code & Links 


Ask in Q&A 


Great Learnings 
Guaranteed! 


Help others in Q&A 


LL 


MERE The REPL 


D = 
a. = 
P = 
Bo = 


LL 


MIND Running Node.js Code 


Use the REPL 


Execute Files 


Used for real apps Great playground! 


Predictable sequence of 


Execute code as you write it 
steps 


LA 


JavaScript Basics 


À Quick Refresher 


LL 


MIND Skip This Module! 


Already know JavaScript? 


Skip this Module! 


Weave 


MIND JavaScript Summary 


Object-Oriented 


Weakly Typed Language Language 


Versatile Language 


No explicit type 
assignment 


Data can be organized in 
logical objects 


Runs in browser & directly 
on a PC/ server 


Primitive and reference 
types 


Data types can be 
switched dynamically 


Can perform a broad 
variety of tasks 


LL 


MIND let & const 


variable values constant values 


LL 


Arrow Functions 


function myFnc() { 


if 


const myFnc = () => { 


| =. 


No more issues with the this keyword! 


LL 


MIND Classes 


class Person { 


Property 


const myPerson = new Person() 
Usage =» myPerson.call() 


(constructor functions anyone?) san STE RE UD REE SUEDE DE) 


Inheritance == class Person extends Master 


(prototypes anyone?) 


LL 


MIND Classes, Properties & Methods 


Properties are like “variables Methods are like “functions 
attached to classes/ objects” attached to classes/ objects” 


constructor () { 
this.myProperty = ' value’ myMethod () {... } 


} 


myProperty = "value myMethod = () => {... } 


Peace 


MIND Spread & Rest Operators 


Used to split up array elements OR object properties 


const newArray = [...oldArray, 1, 2] 
const newObject = { ...oldObject, newProp: 5 } 


Used to merge a list of function arguments into an array 


function sortArgs(...args) { 
return args.sort() 


} 


Aenne 


MIND Destructuring 


Easily extract array elements or object properties and 
store them in variables 


Array Destructuring 


[a, b] = ['Hello', 'Max‘] 
console.log(a) // Hello 
console.log(b) // Max 


Object Destructuring 


{name} = (name: 'Max', age: 28} 


console.log(name) // Max 
console.log(age) // undefined 


LL 


Node.js Basics 


The Essential Knowledge You Need 


Peace 


MIND What's In This Module? 


How Does The Web Work (Refresher) ? 
Creating a Node.js Server 


Using Node Core Modules 


Working with Requests & Responses 
(Basics) 


Asynchronous Code & The Event Loop 


LL 


MIND How the Web Works 


User / Client 


(Browser) 


enters 


http://my-page.com 


Response (e.g. HTML 


Request 1 Domain Lookup | page) 


(at 10.212.212.12) 


Node.js, PHP, ASP.NET, ... <YourCode> + ---------- i Database ! 


Aenne 


MIND HTTP, HTTPS 


Hyper Text Transfer Protocol 


A Protocol for Transferring Data which is understood by Browser and Server 


Hyper Text Transfer Protocol Secure 


HTTP + Data Encryption (during Transmission) 


Peace 
MIND Core Modules 
== 
> 
= 
= 
=) 


Peace 


MIND Node.js Program Lifecycle 


wae ows] > 
Parse Code, Register 
Variables & Functions 


— Eg 


process.exit 


Stream 


Idea: Start working 
on the Data early 


Streams & Buffers 


Example: Incoming Request 


Request Request 
Body Part 1 Body Part 2 


| 


co, 


Work with 


work with 
flow data? 


1 Request Request 
i Body Part 3 Body Part 4 


How do you | 


chunks of data! 


MIND Single Thread, Event Loop & Blocking Code 


Incoming Requests 


ee 


Event Loop 


Handle Event Callbacks 


Single fs” Send to 
<Your Code> JavaScript 


Thread 


Trigger Callback 


ME 


Worker Pool 


Do the Heavy Lifting 


Close Callbacks 
Execute all ‘close’ event 
callbacks 


Execute setImmediate() 
callbacks 


The Event Loop 


Input & Output 
Disk & Network 
Operations (~Blocking 
Operations) 


Timers 


Execute setTimeout, 
setinterval Callbacks 


Pending Callbacks 


Executell/Ofrelated 
Callbacks that were deferred 


Poll 


Retrieve new I/O events, 
execute their callbacks 


~ UOIN22X9 TET EB JO 


LL 


MIND Asynchronous Code 


Asynchronous Code 


Synchronous Code 


<Code> 
y N 
<Code> 


<Code> 
JavaScript & Node.js is 


non-blocking 
<Code> 


Weave 


MIND Node’s Module System 


module.exports = … 


exports is an alias for module.exports 


exports.something = … 


But exports = { ... } won't work! Because 


you then re-assign the alias! 


Peace 


MIND Module Summary 


How the Web Works Node.js & Core Modules 


Node.js shi ith multipl 
Client => Request => Server => Response => Client ee a a ey 


Core modules can be imported into 


any file to be used there 
Program Lifecycle & Event Loop Import via require(‘module’) 


Node.js runs non-blocking JS code and uses an event- 
driven code ("Event Loop”) for running your logic The Node Module System 


A Node program exits as soon as there is no more 

work to do e Import via require(‘./path- 
Note: The createServer() event never finishes by to-file’) for custom files or 
default require(‘module’) for core 
& third-party modules 
Asynchronous Code Requests & Responses Export via 
module.exports or just 
exports (for multiple 
exports 


JS code is non-blocking e Parse request data in chunks 
Use callbacks and events (Streams & Buffers) 
=> Order changes! e Avoid “double responses” 


Peace 


Assignment 


Spin up a Node.js-driven Server (on port 3000) 


Handle two Routes: “/” and “/users” 
= Return some greeting text on “/” 
= Return a list of dummy users (e.g. <ul><li>User 1</li></ul>) 


Add a form with a “username” <input> to the “/” page and submit a 
POST request to “/create-user” upon a button click 


Add the “/create-user” route and parse the incoming data (i.e. the 
username) and simply log it to the console 


LL 


Debugging & Easier Development 


Fixing Errors, Developing Efficiently 


Rue 


MIND Types of Errors 


Syntax Errors Runtime Errors Logical Errors 


MIND Module Summary 


3rd Party Packages 


npm stands for “Node Package Node projects typically don’t just use core modules 
Manager” and it allows you to and custom code but also third-party packages 
manage your Node project and its You install them via npm 

dependencies You can differentiate between production 

You can initialize a project with npm dependencies (--save), development dependencies 


Ue (--save-dev) and global dependencies (-g) 
npm scripts can be defined in the 


package.json to give you “shortcuts” Debugging 
to common tasks/ commands 


Use the VS Code Node debugger to 
step into your code and go through 
it step by step 

Syntax, runtime and logical errors can break your app Analyze variable values at runtime 
Syntax and runtime errors throw (helpful) error Look into (and manipulate) 
messages (with line numbers!) variables at runtime 

Logical errors can be fixed with testing and the help Set breakpoints cleverly (i.e. respect 
of the debugger the async/ event-driven nature) 


Types of Errors 


LA 


Express.js 


Don’t re-invent the Wheel! 


Peace 


MIND What's In This Module? 


What is Express.js? 


Using Middleware 


Working with Requests & Responses 
(Elegantly!) 


Routing 


Returning HTML Pages (Files) 


npm & Packages 


Local Project npm Repository 


Core Node Packages 


Dependencies (3rd Party) 


body-parser 


Rue 


MIND What and Why? 


Server Logic is Complex! 


You want to focus on your Business Logic, not 
on the nitty-gritty Details! 


Use a Framework for the Heavy Lifting! 


express 


Aenne 


MIND What Does Express.js Help You With? 


Parsing Requests & 


Managing Data 


Scat Bene Execute different Code for Manage Data across 
different Requests Requests (Sessions) 


Filter / Validate incoming 


Render HTML Pages Requests 


Work with Files 


Return Data / HTML 


Work with Databases 
Responses 


Weave 


MIND It's all about Middleware 


Request 


y next() 
gy res.send() 
{ 


4 


Assignment 


Create a npm project and install Express.js (Nodemon if you want) 


Create an Express.js app which funnels the requests through 2 
middleware functions that log something to the console and return one 
response. 


Handle requests to “/” and "/users” such that each request only has one 
handler/ middleware that does something with it (e.g. send dummy 
response). 


Aenne 


MIND Routing 


Incoming Request 


Node.js Server at your-address.com 


Express.js Router 


Codeblock 1 Codeblock 2 


Peace 


MIND Request & Response Data 


GET Requests POST* Requests 


URL Information & Headers URL Information & Headers 


- NO DATA - JSON 


Requests 


XML 


Binary Data (File) 


JSON 


HTML 


u 
o 
(72) 
= 
O 
D 
7 
U 

x 


Binary Data 


El 


Peace 


MIND Alternatives to Express.js 


Vanilla Node.js 


Adonis.js 


Sails.js 


Assignment 


Create a npm project and install Express.js (Nodemon if you want) 


Create an Express.js app which serves two HTML files (of your choice/ 


with your content) for ”/” and “/users”. 


Add some static (.js or .css) files to your project that should be required 
by at least one of your HTML files. 


MIND Module Summary 


What is Express.js? 


Express.js is Node.js framework — a 
package that adds a bunch of utility 
functions and tools and a clear set of 
rules on how the app should be built 
(middleware!) 

Its highly extensible and other 
packages can be plugged into it 
(middleware!) 


Middleware, next() and res() 


you can easily add them by calling use() 


Routing 


You can filter requests by path and method 

If you filter by method, paths are matched exactly, 
otherwise, the first segment of a URL is matched 
You can use the express.Router to split your routes 
across files elegantely 


Serve Files 


You're not limited to serving dummy 
text as a response 


You can sendFile()s to your users — 
Express.js relies heavily on middleware functions — e.g. HTML files 


If a request is directly made for a file 


Middleware functions handle a request and should (e.g. a .css file is requested), you can 
call next() to forward the request to the next function enable static serving for such files 


in line or send a response 


via express.static() 


LL 


Dynamic Content & Templates 


Rendering more than Static HTML 


Peace 


MIND What's In This Module? 


Managing Data (without a Database) 


Render Dynamic Content in our Views 


Understanding Templating Engines 


LL 


MIND Templating Engines 


HTMLish Template 


Node/ Express Content Templating Engine 


Replaces Placeholders / Snippets 
with HTML Content 


HTML File 


| 


Weave 


MIND Available Templating Engines 


Pug (Jade) Handlebars 
PL nane 47</p> 


EJS 


Use normal HTML and plain Use minimal HTML and Use normal HTML and 


JavaScript in your templates custom template language custom template language 


Assignment 


Create a npm project and install Express.js (Nodemon if you want) 


Add two routes: 
= "/" => Holds a <form> that allows users to input their name 
=" “/users” => Outputs an <ul> with the user names (or some error text) 


LL 
MIND 


Model View Controller (MVC) 


Structuring your Code 


Aenne 


MIND What’s MVC? 


Separation of Concerns 


Routes 


Models Controllers 


Represent your data in your 
code 


Connecting your Models 
and your Views 


What the users sees 


Work with your data (e.g. 


Decoupled from your Contains the “in-between” 
save, fetch) 


application code logic 


MIND Module Summary 


Responsible for representing your 
data 

Responsible for managing your data 
(saving, fetching, ...) 

Doesn't matter if you manage data 
in memory, files, databases 


Contains data-related logic 


What the user sees 
Shouldn't contain too much logic 
(Handlebars!) 


Controller 


e Connects Model and View 
e Should only make sure that the two can 
communicate (in both directions) 


Rue 


Dynamic Routes & Advanced Models 


Passing and Using Dynamic Data 


Peace 


MIND What's In This Module? 


Passing Route Params 


Using Query Params 


Enhance our Models 


MIND Module Summary 


Dynamic Routing 


You can pass dynamic path 
segments by adding a “:” to the 
Express router path 

The name you add after = is the 
name by which you can extract the 
data on req. params 

Optional (query) parameters can 
also be passed 
(?param=value&b=2) and extracted 
(req.query.myParam) 


More on Models 


A Cart model was added - it holds static 
methods only 

You can interact between models (e.g. delete 
cart item if a product is deleted) 

Working with files for data storage is 
suboptimal for bigger amounts of data 


LL 


Using Promises & Improving Async Code 


Escaping Callback Hell 


Peace 


MIND What's In This Module? 


What is Callback Hell? 


Promises to the Rescue! 


Writing Good Async Code 


Peace 


MIND Callback Hell 


fs.readFile('path', (err, fileContent) => { 
fs.writeFile('path', 'new content', (err) => { 


}) 
}); 


Deeply nested callbacks can be hard to read, understand & maintain! 


MIND Module Summary 


Dynamic Routing 


You can pass dynamic path 
segments by adding a “:” to the 
Express router path 

The name you add after = is the 
name by which you can extract the 
data on req. params 

Optional (query) parameters can 
also be passed 
(?param=value&b=2) and extracted 
(req.query.myParam) 


More on Models 


A Cart model was added - it holds static 
methods only 

You can interact between models (e.g. delete 
cart item if a product is deleted) 

Working with files for data storage is 
suboptimal for bigger amounts of data 


LL 


Storing Data in Databases 


Storing Application Data Correctly 


Peace 


MIND What's In This Module? 


Different Kinds of Databases (SQL vs 
NoSQL) 


Using SQL in a Node.js App 


LL 


MIND SQL vs NoSQL 


Goal: Store Data and Make it Easily Accessible 


Use a Database! 


SQL Databases NoSQL Databases 


e.g. MySQL e.g. MongoDB 


Peace 


MIND What's SQL? 


= max@test.com Maximilian Schwarzmuller 


manu@test.com Manuel Lorenz 


peasy VH REM Ie 
gu Sr Er 


Orders 


Products 


a we re Lemon 


120.99 A comfy chair 


Book Exciting book! 


Rue 


MIND Core SQL Database Characteristics 


All Data (in a Table) 


has to fit! 


One-to-Many 
Many-to-Many 


Rue 


MIND SQL Queries 


SELECT x FROM users WHERE age > 28 


SQL Keywords / Syntax Parameters / Data 


Rue 


MIND NoSQL 


Database Shop 


Users Orders 


Collections 


a en 


{ name: 'Max', age: 29 } 
Documents 


{ name: 'Manu' } 


Schemaless! 


What's NoSQL? 


Aenne 


MIND NoSQL Characteristics 


NO Data Schema ==> on 


(name, id, age} 


{ id, age } 


NO Data Relations = a DAGE 


You CAN relate documents 
but you don't have to (and 


you shouldn't do it too much 
or your queries become 
slow) 


Re 


MIND Horizontal vs Vertical Scaling 


Horizontal Scaling Vertical Scaling 


SES = 


Add More Servers (and merge Data 
into one Database) 


Improve Server Capacity / Hardware 


LA 


MIND SQL vs NoSQL 


SQL 


Data uses Schemas Schema-less 
Data is distributed across multiple Data is typically merged / nested in a 
tables few collections 
Horizontal scaling is difficult / Both horizontal and vertical scaling is 
impossible; Vertical scaling is possible possible 
Limitations for lots of (thousands) read Great performance for mass read & 
& Write queries per second write requests 


Peace 


MIND Associations 


Product 
Has Many 


Has Many 


Belongs to Many 


Belongs to Many Has Many 


LL 
MIND 


Sequelize 


Focus on Node.js, not on SQL 


MIND What is Sequelize? 


An Object-Relational Mapping Library 


name 
age 
email 
password 


EI ECS Le 
28 


password 


w 
INSERT INTO users VALUE, 'Max', 28, 'dsdg312') 
A 


"dsde>12' +) 


const user = User.create({ name: 


'Max', age: 28, password: 


Weave 


Models 


Instances 


Queries 


Associations 


Core Concepts 


e.g.| User] Product 


(i build() 


const user = 


findAll() 


hasMany (Product) 


MIND Module Summary 


SQL uses strict data schemas and 
relations 

You can connect your Node.js app 
via packages like mysql2 


Writing SQL queries is not directly 
related to Node.js and something 
you have to learn in addition to 
Node.js 


Sequelize 


Instead of writing SQL queries manually, you 
can use packages (ORMs) like Sequelize to 
focus on the Node.js code and work with 
native JS objects 

Sequelize allows you define models and 
interact with the database through them 
You can also easily set up relations 
(“Associations”) and interact with your 
related models through them 


LP 


NoSQL Databases / MongoDB 


Storing Data in a Different Kind of Database 


Peace 


MIND What's In This Module? 


What is MongoDB? 


Using the MongoDB Driver in Node.js Apps 


LL 


m What? 
0 mongolDB. 
Humongous 


Because it can store lots and lots of data 


Rue 


MIND How it works 


Database i Shop i 


Collections i Users Orders (i 


T a 


{ name: 'Max', age: 29 } 
Documents 


{ name: 'Manu' } 


Schemaless! 


MIND JSON (BSON) Data Format 
{ 
"name": "Max", 
"age": 29, 
"address": 
{ 


"city": "Munich" 
fo 
"hobbies": [ 
{ "name": "Cooking" }, 
{ "name": "Sports" } 


What's NoSQL? 


Weave 


MIND Relations - Options 


Customers ymers 


userName: 'max', 
age: 29, 
address: { 


street: 'Second Street', 
city: ‘New York! 


userName: 'max' 
favBooks: [' 


} 


name: 'Lord of the Rings 1' 


Aenne 


MIND NoSQL Characteristics 


No Structure 
(name id age} 
{id, age} 


Fewer Data Relations 


You CAN relate documents 


but you don't have to (and 
you shouldn't do it too much 
or your queries become 
slow) 


LA 


MIND SQL vs NoSQL 


SQL 


Data uses Schemas Schema-less 
Data is distributed across multiple Data is typically merged / nested in a 
tables few collections 
Horizontal scaling is difficult / Both horizontal and vertical scaling is 
impossible; Vertical scaling is possible possible 
Limitations for lots of (thousands) read Great performance for mass (simple) 
& Write queries per second read & write requests 


Re 


MIND Horizontal vs Vertical Scaling 


Horizontal Scaling Vertical Scaling 


SES = 


Add More Servers (and merge Data 
into one Database) 


Improve Server Capacity / Hardware 


MIND Module Summary 


NoSQL / MongoDB 


Alternative to SQL databases 

No strict schemas, fewer relations 
You can of course use schemas and 
reference-based relations but you 
got more flexibility 

Often, relations are also created by 
embedding other documents/ data 


Working with MongoDB 


Use the official MongoDB Driver 

Commands like insertOne(), find(), 
updateOne() and deleteOne() make CRUD- 
operations very simple 

Check the official docs to learn about all 
available operations + configurations/ 
operators 

All operations are promise-based, hence you 
can easily chain them for more complex 
flows 


Rue 


Mongoose 


À MongoDB ORM 


Peace 


MIND What's In This Module? 


What is Mongoose? 


Using Mongoose in Node.js Apps 


MIND What is Mongoose? 


A Object-Document Mapping Library 


name 
age 
email 


password 


db.collection('users').insert6& ame: 'Max', age: 28, password: 
ra U +) 
A 


'Max', age: 28, password: 'dsdg312' }) 


const user = User.create({ name: 


E Es 


Peace 


MIND Core Concepts 


Schemas & Models e.g.| User] Product 
E ew ) 


const user = n 


User | find() 


Instances 


Queries 


MIND Module Summary 


Mongoose 


SQL uses strict data schemas and 
relations 

You can connect your Node.js app 
via packages like mysql2 


Writing SQL queries is not directly 
related to Node.js and something 
you have to learn in addition to 
Node.js 


Sequelize 


Instead of writing SQL queries manually, you 
can use packages (ORMs) like Sequelize to 
focus on the Node.js code and work with 
native JS objects 

Sequelize allows you define models and 
interact with the database through them 
You can also easily set up relations 
(“Associations”) and interact with your 
related models through them 


LL 


Sessions & Cookies 


Persisting Data across Requests 


Peace 


MIND What's In This Module? 


What are Cookies? 


What are Sessions? 


Using Session & Cookies? 


LP 


MIND What's a Cookie? 


Cookie 


Frontend (Views) 


Request Include Cookies 


Set via Response 
Header 


Server (Node App) 


LL 


MIND What's a Session? 


Frontend (Views) Cookie 


Associated with user/ 
Request client via cookie 


Server (Node App) Session 


I I 
Database ------- | Session Storage 


Roue 


MIND When to use What 


Cookies Session 


VEN reclame Authentication Status Management 
(across Requests) 


Authentication Session General Cross-Request Data 
Management Management 


MIND Module Summary 


Great for storing data on the client 
(browser) 

Do NOT store sensitive data here! It 
can be viewed + manipulated 


Cookies can be configured to expire 
when the browser is closed (=> 
“Session Cookie”) or when a certain 
age/ expiry date is reached 
(“Permanent Cookie”) 

Works well together with Sessions... 


Sessions 


Stored on the server, NOT on the client 
Great for storing sensitive data that should 
survive across requests 

You can store ANYTHING in sessions 

Often used for storing user data/ 
authentication status 

Identified via Cookie (don’t mistake this with 
the term “Session Cookie) 

You can use different storages for saving 
your sessions on the server 


LL 


User Authentication 


Restricting Access 


Peace 


What's In This Module? 


What exactly is “Authentication”? 


Storing & Using Credentials 


Protecting Routes 


LL 


MIND What is “Authentication”? 


Open tolanyone! 


Only available to logged-in users 


Create & Manage 
Products 


Server 


LL 


MIND How is Authentication Implemented? 


Stores Session ID 


Request restricted) 
Resource 


Login Request 200 


Server Session 


Database Stores info that User is 
Authenticated 


Rue 


MIND CSRF Attacks 


Cross-Site Request Forgery 


Cookie 


Intended Request Intended Request 
(e.g. send money (e.g. send money 
to C) to B) 


Frontend (Views) 


MIND Module Summary 


Authentication 


Authentication means that not every 
visitor of the page can view and interact 
with everything 


Authentication has to happen on the 
server-side and builds up on sessions 
You can protect routes by checking the 
(session-controlled) login status right 
before you access a controller action 


Security & UX 


Passwords should be stored in a hashed 
form 

CSRF attacks are a real issue and you should 
therefore include CSRF protection in ANY 
application you build! 

For a better user experience, you can flash 
data/ messages into the session which you 
then can display in your views 


LL 


Sending Mails 


Communicating with the Outside World 


LL 


MIND How Does Sending Mails Work? 


um mais mm 


Re 
MIND 


Advanced Authentication & Authorization 


Beyond Signup & Login 


Peace 


MIND What's In This Module? 


Resetting Passwords 


Authorization 


MIND Module Summary 


Password Resetting 


Password resetting has to be 
implemented in a way that prevents users 


from resetting random user accounts 
Reset tokens have to be random, 
unguessable and unique 


Authorization 


Authorization is an important part of pretty 
much every app 

Not every authenticated user should be able 
to do everything 

Instead, you want to lock down access by 
restricting the permissions of your users 


LP 


Forms, User Input & Validation 


Getting that Precious User Input 


Peace 


MIND What's In This Module? 


Why Validate? 


How to Validate 


Weave 


MIND Why Validate? 


User 
Controller / Middleware Validation 


<Your Node Code> (Model) 


Database / File 


Reject Input 


LL 


MIND How to Validate 


Error Message + Keep 
old Input User Input (Form Input) 
-- Pleeg —— Validate on Client-Side 


Validate on Server- 
Side 


Validation Fails Server (Node App) 


Re 


Error Handling 


Fail Gracefully 


Peace 


MIND What's In This Module? 


Different Types of Errors 


Handling Errors 


LL 


MIND How Bad Are Errors? 


Errors are not necessarily the end of your app! 


You just need to handle them correctly! 


LL 


MIND Different Types of Errors 


Technical/ Network Errors “Expected” Errors Bugs/ Logical Errors 
: e.g. File can't be read; e.g. User object used when it 
ee PET database operation fails doesn’t exist 
Show error page to user Inform user, possibly retry Fix during development! 


Rue 


MIND Working with Errors 


Error is thrown No erroris thrown 


Synchronous Code: Asynchronous Code: Wala che 
try-catch then()-catch() 
Directly handle error nes Express En Throw error 
handling function 


Intended Page/ Response 
with error information 


Directly handle 
"error" 


Redirect 


Error Page (e.g. 500 page) 


Peace 


MIND Errors & Http Response Codes 


2xx (Success) 200 Operation succeeded 


Success, resource 
created 


3xx (Redirect) Moved permanently 


4xx (Client-side error) Not authenticated 
Not authorized 


Not found 


Invalid input 


Server-side error 


5xx (Server-side error) 


MIND Module Summary 


Types of Errors & Handling Errors 


You can differentiate between different 
types of errors - technical errors (which 
are thrown) and expected errors” (e.g. 


invalid user input) 

Error handling can be done with custom 
if-checks, try-catch, then()-catch() etc 

You can use the Express error handling 
middleware to handle all unhandled errors 


Errors & Status Code 


When returning responses, it can make 
sense to also set an appropriate Http status 
code - this lets the browser know what went 
wrong 

You got success (2xx), redirect (3xx), client- 
side errors (4xx) and server-side errors (5xx) 
codes to choose from 

Setting status codes does NOT mean that 
the response is incomplete or the app 
crashed! 


Re 
MIND 


File Uploads & Downloads 


Handling Files Correctly 


Peace 


MIND What's In This Module? 


Uploading Files 


Downloading Files 


Rue 


Asynchronous JavaScript Requests 


Behind-The-Scenes Work 


Weave 


MIND What are Asynchronous Requests? 


Client (Browser) 


Request à Response 
HTML 
Page 


Server (Node App) 


Peace 
MIND 


Adding Payments 


Creating a Real Shop 


LA 


MIND Payment Process 


= 


Complex Tasks, 


typically 
outsourced 


LL 


MIND How Stripe Works 


Client (Browser) ee Card 


Stripe Servers (3' Party) 


Server (Node App) Create Payment Data 


LP 


REST APIs 


Decoupling Frontend and Backend 


Peace 


MIND What's In This Module? 


What are “REST APIs”? 


Why use/ build REST APIs? 


Core REST Concepts & Principles 


First REST API! 


Rue 


MIND What & Why? 


Not every Frontend (UI) requires HTML Pages! 


Mobile Apps Single Page Web Apps Service APIs 


(e.g. Twitter) (e.g. Udemy Course Player) (e.g. Google Maps API) 


nn | 


Frontend (UI) is decoupled from the Backend (Server) 


LL 


MIND A Different Kind of Response is Needed 


Representational State Transfer 


Transfer Data instead of User Interfaces 


LL 


MIND REST API Big Picture 


Mobile App SPA Any App 


App Backend API Service API 


Server 


MIND Data Formats 
EE | ee 


comam ee No Ul Assumptions No Ul Assumptions No Ul Assumptions 
Interface 


REE ee eee eee ee 


POST /post 


Server-side 


GET /posts Su | Logic, 


Database 


I A tc. 
GET /posts/:postld | ea 


LL 


MIND Http Methods (Http Verbs) 


More than just GET & POST 


Post a Resource to the Put a Resource onto the 
Server (i.e. create or Server (i.e. create or 
append Resource) overwrite a Resource) 


PATCH DELETE | OPTIONS | 


| Determine whether follow- | 
up Request is allowed |! 


Get a Resource from the 
Server 


Update parts of an 
existing Resource on the 
Server | (sent automatically) 


Delete a Resource on the 
Server 


LL 


MIND REST Principles 


Uniform Interface Stateless Interactions 


Clearly defined API endpoints Server and client don’t store 
with clearly defined request + any connection history, every 
response data structure request is handled seperately 


Cacheable Layered System Code on Demand 


Server and client are 
separated, client is Server may forward Executable code may 
not concerned with requests to other be transferred from 
persistent data APIs server to client 
storage 


Servers may set 
caching headers to 


allow the client to 
cache responses 


Peace 


MIND CORS? 


Cross-Origin Resource Sharing 


Client 


Server 


Server 


Client 


localhost:3000 localhost:3000 


CORS Error 


localhost:4000 localhost:3000 


MIND Module Summary 


REST Concepts & Ideas 


REST APIs are all about data, no UI logic 
is exchanged 
REST APIs are normal Node servers which 


expose different endpoints (Http method + 
path) for clients to send requests to 

JSON is the common data format that is 
used both for requests and responses 
REST APIs are decoupled from the clients 
that use them 


Requests & Responses 


Attach data in JSON format and let the other 
end know by setting the “Content-Type” 
header 

CORS errors occur when using an API that 
does not set CORS headers 


LL 


Advanced REST API Topics 


Complete Project, Authentication & More 


Peace 


MIND What's In This Module? 


Planning a REST API 
CRUD Operations & Endpoints 


Validation 


Image Upload 


Authentication 


LL 


MIND REST & The Rest of the Course 


Node + Express App Setup No changes 


: : No real changes, more Http 
Routing / Endpoints SEE Fe 


Handling Requests & Responses Parse + Send JSON Data, no Views 


Request Validation No changes 


Database Communication No changes 


Files, Uploads, Downloads No changes (only on client-side) 


Sessions & Cookies No Session & Cookie Usage 


Authentication Different Authentication Approach 


Hood 


LL 


MIND How Authentication Works 
Stores 
Token 
Storage Client 


Send Auth Data Seksron? 


Stored Token is sent to 
authorize subsequent 
request 


RESTful API is stateless! 


LL 


MIND What's that Token? 


> 


JSON Web Token (JWT) 


MIND Module Summary 


From “Classic” to REST API 


Most of the server-side code does not 
change, only request + response data is 
affected 

More Http methods are available 


The REST API server does not care about 
the client, requests are handled in 
isolation => No sessions 


Authentication 


Due to no sessions being used, 
authentication works differently 

Each request needs to be able to send some 
data that proves that the request is 
authenticated 

JSON Web Tokens (“JWT”) are a common 
way of storing authentication information on 
the client and proving authentication status 
JWTs are signed by the server and can only 
be validated by the server 


LL 


async/await 


Working with Async Code more Elegantly 


Rue 


MIND What? 


Asynchronous Requests in a Synchronous Way* 


*Only by the way it looks, NOT by the way it behaves 


LL 


Real-Time Web Services with WebSockets 


Pushing Data from Server to Client 


Peace 


MIND What's In This Module? 


Why Realtime? 


How to Add Realtime Communication to a 


Node App 


LL 


MIND How It Currently Works 


(1) -| | Response (2) 


ss D 


LL 


MIND WebSockets instead of Http 


Established via Http 


©) Request Response 


Server Server 


Push Data 


© 


LA 


GraphQL 


REST on Steroids 


Peace 


MIND What's In This Module? 


What is GraphQL? 


GraphQL vs REST 


How to use GraphQL 


Rue 


MIND What is GraphQL? 


REST API 


Stateless, client-independent API for exchanging data 


GraphQL API 


Stateless, client-independent API for exchanging data with higher query flexibility 


Peace 


MIND REST API Limitations 


IAE 

title: (First Post” 
content: ' … 
creator: 1 … 


GET /post | Fetch Post 


What if we only need the title and id? 


Create a new REST API Use Query Parameters (e.g. 
Endpoint (e.g. GET /post-slim) GET /post?data=slim) a ebd 

Problem: Lots and lots of Problem: API becomes hard SEN non 
Endpoints & lots of Updating to understand ran 


How does GraphQL Work? 


REE ee eee eee ee 


| Server-side 
| Logic, 
Database 
Access etc. 


Client Server 


Peas 
A GraphQL Query 


Operation “endpoint” 


Operation type 


Other types: 
mutation 
subscription 


Requested fields 


Rue 


MIND Operation Types 


Manipulate Data POSTE PUT- ARATCH SZ DELETE 


= — 


Subscription == Set up realtime connection via Websockets 


Rue 


GraphQL Big Picture 


Type 
Definition 


(contain 
hal | your 
lern server-side 
Mutation logic) 
Defintions 


Query 
Defintions \ Resolvers 


Client 


Subscription 
Defintions 


Peace 


MIND How does GraphQL Work? 


It’s a normal Node (+ Express) Server! 


ONE Single Endpoint (typically /graphql) 


Uses POST because Request Body defines Data 
Structure of retrieved Data 


Server-side Resolver analyses Request Body, Fetches 
and Prepares and Returns Data 


MIND Module Summary 


GraphQL Core Concepts GraphQL vs REST 


Stateless, client-independent API REST APIs are great for static data 

Higher flexibility than REST APIs offer due requirements (e.g. file upload, scenarios 

to custom query language that is exposed where you need the same data all the time) 
to the client GraphQL gives you higher flexibility by 
Queries (GET), Mutation (POST, PUT, exposing a full query language to the client 
PATCH, DELETE) and Subscriptions can Both REST and GraphQL APIs can be 

be used to exchange and manage data implemented with ANY framework and 


ALL GraphQL requests are directed to actually even with ANY server-side language 
ONE endpoint (POST /graphqal) 

The server parses the incoming query 

expression (typically done by third-party 

packages) and calls the appropriate 

resolvers 


GraphQL is NOT limited to React.js 
applications! 


Aenne 
MIND 


Deploying Node.js Applications 


From Development to Production 


Peace 


MIND What's In This Module? 


Preparing for Deployment 


Deployment Steps & Config 


Security 


MIND Which Kind of Application? 


Your Logic 


REST GraphQL 


Node Server 


Node Framework (e.g. Express) 


Peace 


MIND Preparing the Code for Production 


Use Environment Variables Avoid hard-coded 
values in your code 
i Don't use that testing 
Use Production API Keys Stripe API 
Reduce Error Output Details Don t send sensitive 
info to your users 
Set Secure Response Headers Implement best 
practices 
Add Asset Compression Reduce Response 
Size 
Often handled by the een Stay up to date about 
Hosting Provider g JIMI what's happening 
Encrypt data in 


MIND Using SSL/TLS 


Binds Key to Identity 
SSL Certificate 


Public Key 


------ -L------ı 


Decrypt 
= Private Key 


Server 


Bt 


SSL/TLS Encryption 
dvesdropping 


Attacker 


Aenne 


MIND Configuring the Server (in a Secure Way) 


Install & Update required E D Protect & Manage Server 
Software Network 


Use Manage Service unless you know what you're doing! 


MIND Using a Hosting Provider 


<Your Code> 


---------4--------------------------------------- 1 Gateway, 
public Server 


Virtual Server / Managed 


e 
Managed Space Servers P 


Private Network 
No external Access 


Compression 


Logging 
Load Balancing 


Your Users 


LL 


MIND Version Control (Git) 


Commits Branches Remote Repositories 


Store code + commits + 
branches in the cloud 


Different “versions” of your 


Snapshots” of your code le 


e.g. master (production), 
development, new-feature 


Protect against loss of local 
data 


Easily switch between 
commits 


Create commit after 
bugfixes, new features, ... 


Separate development of 
new features and bugfixing 


Deploy code automatically 


Peace 


MIND Heroku Deployment Process 


Prepare project (including compression) 


Prepare git master branch for deployment 


Use Heroku CLI to connect Heroku with app 


Push code to Heroku 


Enable SSL + Logging (Paid) 


LL 


MIND Storing Files 


Static Code Files User-Uploaded Files 


Stored with Other Source Code Not included in Source Code Package 


e.g. AWS S3 with s3-proxy 


LL 


MIND Bonus: Deploying Frontend Web Apps (SPAs) 


<Source Code> 
Build Process 


HTML + JS + CSS Files 


Use a Static File Host (e.g. AWS 
S3) 


LP 


Caching 


Serving Files & Data as Fast as Possible 


LL 


MIND Different Types of Caching 


Controlled via Headers 


Cache Cache Default Service 
rendered database browser 


templates data cache 


Built-in! om Built-in! um 
solution solution 


Depends on database 
engine, often built-in 


worker 
cache 


LA 


npm & Node as a Build Tool 


Beyond Node Web Servers 


LL 


MIND Two For the Price of One 


Execute Code Manage Packages 


Interact with Files Run Scripts 


LL 


MIND Understanding npm 


Node Package Manager 


npm CLI 


Package 


Isolated Functionality npm Repository 


(in Node code) Share (internally 
or externally) 
npm install Package A 
Package B 
Some Node Project En 


e.g. generate random 


number 


LL 


MIND Remember: Node can execute any js File! 


Read & Write Files Spin up a Web Server 


Parse (read) file 


Manipulate content 
Output new file 


Roue 


MIND What is a "Build Tool”? And Why? 


Unoptimized but ce 


const copy = (arr) => const copy = (arr) => 
iL { var a = funetion(b) 


returnan anr]: A ann i: {return b.slice()} 


} i 


Peace 


MIND Global npm Packages 


Now global packages make sense! 


LL 
MIND 


Roundup & Next Steps 


How to Continue? 


Peace 


MIND Next Steps 


Practice! 


Explore APIs & Serverless 


Apps 


Dive into Frontend 
Development 


